import React, { useEffect } from "react"
import { Canvas, View } from "@tarojs/components"
import uCharts from '@qiun/ucharts';
import Taro from "@tarojs/taro";
import { MoneyFormat } from "@/utils/format";
import viewMode from "@/store/viewMode";
import account from "@/store/account";
import "./index.scss"

interface dataType {
    balance: number
    expense: number
    income: number
    userId: number,
    userName: string,
}

let uChartsInstance: any = {};
const MemberPie: React.FC<{
    pieData: dataType[],
    onInit: (val: number) => void
    hide: boolean
}> = ({ pieData, onInit, hide }) => {

    const dataHandler = () => {
        const memberInitMap = (account.activeAccount?.members || []).reduce((obj, cur) => {
            return {
                ...obj,
                [cur.userId as number]: cur
            }
        }, {})
        let total = 0  
        const list = pieData.map(item => {
            const value = (memberInitMap[item.userId]?.initAmount || 0) + item.balance || 0
            total += value
            return {
                value,
                name: memberInitMap[item.userId]?.userName,
                ...item
            }
        }).filter(item => {
            return item.value > 0
        })
        onInit(total)
        return list
    }

    useEffect(() => {
        if (pieData?.length) {
            drawCharts()
        }
    }, [pieData])

    const drawCharts = () => {
        const sysInfo = Taro.getWindowInfo();
        
        let ctx = Taro.createCanvasContext('member_pie_id');
        uChartsInstance = new uCharts({
            type: "pie",
            context: ctx,
            width: 750 / 750 * sysInfo.screenWidth,
            height: 350 / 750 * sysInfo.screenWidth,
            fontColor: viewMode.isNight ? '#fff' : '#25283b',
            series: [
                {
                    data: dataHandler()
                }
            ],
            pixelRatio: 1,
            animation: true,
            background: "#FFFFFF",
            color: ["#f635a8", "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
            padding: [5, 5, 5, 5],
            enableScroll: false,
            legend: {
                fontColor: viewMode.isNight ? '#fff' : '#25283b',
                fontSize: 12,
                position: 'right'
            },
            extra: {
                tooltip: {},
                pie: {
                    // activeOpacity: 0.5,
                    // activeRadius: 10,
                    // offsetAngle: 0,
                    border: true,
                    borderWidth: 2,
                    borderColor: "#FFFFFF"
                }
            }
        });
    }

    const tap = (e) => {
        uChartsInstance.touchLegend(e);
        uChartsInstance.showToolTip(e, {
            // formatter: (item, category, index, opts) => {
            formatter: (item) => {
                return `${item.name}：${MoneyFormat(item.value)}`;
            }
        });
    }

    return (<View className="member-chart-container">
        <Canvas
            canvas-id="member_pie_id"
            id="member_pie_id"
            className={`member_pie_chart + ${hide ? 'hide' : ''}`}
            onTouchEnd={tap} />
    </View>)
}

export default MemberPie